forum

home / developersection / forums / how to implement a webgrid in asp.net mvc

Ask Question

How to implement a WebGrid in ASP.NET MVC

Anupam Mishra 2610 31-Mar-2016
Hi Everyone,

I want to use WebGrid to display data on a web page using an HTML table element 
Please It also be demonstrate a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.

Thank you.
asp.net mvc c#  asp.net  ajax  asp.net mvc 
Updated on 01-Apr-2016
Anupam Mishra

Other

Message
Can you answer this question?
Answer

1 Answers

Sachin Singh

Sachin Singh

01-Apr-2016

Hi Anupam,

 You want to use WebGrid to display data on a web page using an HTML table element 

Please It also be demonstrate a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.

Here, we have taken a "Student" model and i want to display all Student in WebGrid with a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.


Here, My Student Controller:


public ActionResult StudentGrid()

        {

           List<Student> lstStudentModel = new List<Student>();

           List<Student> lstStudentMasters = db.Students.ToList();

            lstStudentMasters.ForEach(x =>

            {

               Student  stuModel = new Student();

                stuModel.FirstName =x.FirstName;

                stuModel.LastName = x.LastName;

                lstStudentModel.Add(stuModel);

            });

           return View(lstStudentModel);

        }

 

        [HttpPost]

       public ActionResult StudentGrid(string studentName)

        {

           List<Student> lstStudentModel = new List<Student>();

           List<Student> lstStudentMasters = db.Students.Where(x =>



                             x.FirstName.Contains(studentName)).ToList();

            lstStudentMasters.ForEach(x =>

            {

               Student stuModel = new Student();

                stuModel.FirstName =x.FirstName;

                stuModel.LastName = x.LastName;

                lstStudentModel.Add(stuModel);

            });

           if (lstStudentModel.Count > 0)

            {

               return View(lstStudentModel);

            }

           else

            {

               return Json("No Record Found");

            }

        }


Now My StudentGrid View:

@{  

    ViewBag.Title ="StudentGrid";  

}

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>

<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />

<div id="dialog-alert" style="display: none">

    <p>

       Record Found

   </p>

</div>

<div id="grid">

    <table width="100%">

        <tr>

            <td>

                <table>

                    <tr>

                        <td>Search By Name  

                       </td>

                        <td>

                            <input type="text" id="txtName" />

                        </td>

                        <td>

                            <input type="button" id="bttnSearch" value="Search" />

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td>

                @{  

                   var grid = new WebGrid(Model, canPage: true, rowsPerPage: 4,

                    selectionFieldName:"selectedRow",



                        ajaxUpdateContainerId: "gridContent");

                    grid.Pager(WebGridPagerModes.All);}

@grid.GetHtml(tableStyle: "webGrid",

headerStyle:"header",

alternatingRowStyle:"alt",

selectedRowStyle:"select",

columns:



grid.Columns(grid.Column("FirstName", " FirstName"),grid.Column("LastName", "LastName")))

           </td>

        </tr>

    </table>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        $('#bttnSearch').click(function () {

           var stuName = $('#txtName').attr('value');

            $.ajax({

                type:"post",

                url:"/Student/StudentGrid",

                data: { studentName: $('#txtName').attr('value') },

                datatype:"json",

                traditional:true,

                success:function (data) {

                   // debugger  

                    if (data == "No Record Found")



                    {

                        $("#dialog-alert").dialog('open');

                    }

                   else {

                        $('#gridContent').html(data);

                        $('#txtName').val(stuName);

                    }

                }

            });

        });

    });

    $(document).ready(function () {

       var url = "";

        $("#dialog-alert").dialog({

            autoOpen:true,

            resizable:true,

            height: 100,

            width: 350,

            show: { effect:'drop', direction: "up" },

            modal:true,

            draggable:true,

            open:function (event, ui) {

                $(".ui-dialog-titlebar-close").hide();

            },

            buttons: {

               "OK": function () {

                    $(this).dialog("close");

                }

            }

        });

    });

</script>


Output:

How to implement a WebGrid in ASP.NET MVC


For Searching Student Name:


How to implement a WebGrid in ASP.NET MVC

 

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy